

<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>OR Media Anesthesia Module</title>
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
		<style type="text/css">
			body, html {
				width:100%;
				height:100%;
				background-color:#555;
				position:absolute;
				margin:0;
				padding:0;
			}
			.content {
				box-sizing:border-box;
				min-width:1200px;
				margin:20px;
				padding:0.5cm;
				color:white;
				background-color:#111;
			}
			tr td {
				border-bottom:#333;
			}
			.yellow {
				color:#ffD700;
			}
			table.tdpad td {
				padding:10px;
			}
			table {
				color:white;
			}
			.formtitle {font-size:20px;font-weight:bold}
			.underline {text-decoration:underline;}
			.textpad {padding-left:10px;padding-right:10px;}
			.w3-bold {font-weight:bold;}
			.verticaltext{writing-mode:vertical-rl;text-orientation: upright;}
			.redslot {
				border:solid red 2px;
				border-radius:10px;
				background-color:rgba(255,0,0,0.3);
				color:white;
				font-weight:bold;
				text-align:center;
				line-height:20px;
				padding-top:4px;
				padding-bottom:4px;
			}
			table.tdborder td {
				border:1px solid #666;
			}
			.w3-input {height:22px;}
		</style>
				<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.js"></script>
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.css"></link>
	</head>
	<body>
		
		<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

$(document).ready(function () {
//使用Ajax获取json数据
    var jsonData = $.ajax({
        url: 'getTotalAmountFormat',
        type: "get",
        dataType: 'json',
    }).done(function (results) {
        // 将获取到的json数据分别存放到两个数组中
        var labels = [], data=[];
        for (var item in results) {
            console.log(item);//得到键
            console.log(results[item]);//得到键对应的值
            labels.push(item);
            data.push(results[item]);
        }
        // 设置图表的数据
        var tempData = {
            labels : labels,
            datasets: [{
                label: '月销售额',
                data: data,
                backgroundColor: 'rgba(66, 165, 245, 0.5)',
                borderColor: '#2196F3',
                borderWidth: 1
            }]
        };

        // 获取所选canvas元素的内容
        var ctx = document.getElementById("line-chart");
        //设置图表高度
        var myLineChart = new Chart(ctx, {
            type: 'line',
            data: tempData,
            options: {
                maintainAspectRatio: true,
            }
        });
    });
}

// String str="{\"2018-05\": 389.0,\"2018-06\": 359.0,\"2018-07\": 383.0,\"2018-08\": 829.0,\"2018-09\": 829.0,\"2018-10\": 1029.0,\"2018-11\": 389.0}";
</script>
	</body>
</html>